<template>
<div :id="id" style="height:300px;width:30%;"></div>
</template>

<script>
export default {
    name: 'BarChart',
    props: {
        id: {
            type: String
        },
        data: {
            type: Object
        }
    },
    mounted () {
        this.init()
    },
    methods: {
        init () {
            var myChart = this.$echarts.init(document.getElementById(this.id))
            const { columns: [a, b, c], rows } = this.data
            let x = []
            let y1 = []
            let y2 = []
            for (let i = 0; i < rows.length; i++) {
                x[i] = rows[i][a]
                y1[i] = rows[i][b]
                y2[i] = rows[i][c]
            }
            let option = {
                tooltip: {
                    trigger: 'axis',
                    confine: true,
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    data: [c, b]
                },
                xAxis: [
                    {
                        type: 'category',
                        data: x,
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#999'
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#999'
                            }
                        }
                    },
                    {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#999'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: c,
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: '#3F9EFF'
                            }
                        },
                        data: y1
                    },
                    {
                        name: b,
                        type: 'line',
                        yAxisIndex: 1,
                        itemStyle: {
                            normal: {
                                color: '#67c23a'
                            }
                        },
                        data: y2
                    }
                ]
            }
            myChart.setOption(option)
            window.addEventListener('resize', () => myChart.resize())
            this.$nextTick(() => {
                window.removeEventListener('resize', () => myChart.resize())
            })
        }
    }
}
</script>
